<template>
	<view class="container">
		<view class="content-bor">

		</view>
		<view class="content">
			<view class="list">
				<view class="item">
					<view class="title">
						新密码
					</view>
					<view class="uni-input">
						<input class="input" :type="form.code==1?'number':''" v-model="form.password" name="input" :minlength="6" :maxlength="form.code==1?'6':20" placeholder="请输入新密码" :password="data.showPasswords"/>
						<uni-icons :type="!data.showPasswords?'eye-filled':'eye-slash-filled'" size="20"
							@click="data.showPasswords=!data.showPasswords"></uni-icons>
					</view>

				</view>
				<view class="item">
					<view class="title">
						确认密码
					</view>
					<view class="uni-input">
						<input  class="input" v-model="form.re_password" name="input" placeholder="请确认新密码" :password="data.showPassword"/>
						<uni-icons :type="!data.showPassword?'eye-filled':'eye-slash-filled'" size="20"
							@click="data.showPassword=!data.showPassword"></uni-icons>
					</view>

				</view>
				<view class="item">
					<view class="title">
						手机号
					</view>
					<view class="mobile">
						{{userInfo.mobile}}
						<view class="time" @click="getcode">
							{{time}}
						</view>
					</view>
				</view>
				<view class="item">
					<view class="title">
						验证码
					</view>
					<input class="uni-input" v-model="form.msg" name="input" placeholder="请输入验证码" />
				</view>
			</view>
		</view>
		<view class="bottomButtons"></view>
		<view class="bottomButton">
			<view class="btn-s" @click="submit">确定</view>
		</view>
	</view>
</template>

<script setup>
		import {ref,getCurrentInstance, reactive} from "vue";
		import {onLoad,onShow} from "@dcloudio/uni-app";
		const {proxy} = getCurrentInstance();
		let form =ref({
					password: '',
					re_password: '',
					msg: '',
					code: 1,
				})
		let data=reactive({
			showPasswords:true,
			showPassword:true
		})
		let addresstr =ref('')
		let state =ref(true)
		let userInfo =ref({})
		let time =ref('获取验证码')
		onLoad((option)=>{
			console.log('页面onLoad',Number(option.code))
			form.value.code=Number(option.code)
			if(option.code==1){
				uni.setNavigationBarTitle({ title: '支付密码' })
			}
		})
		onShow(()=>{
			console.log('页面onShow')
			userInfo.value=uni.getStorageSync('userInfo')
		})

		const getcode=()=>{
			proxy.$request({
				url: `api/smscodesview/`,
				method:'post',
				data:{mobile:userInfo.value.mobile} ,
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					if(res.errno==0){
						let times=60
						let timer=setInterval(function(){
							if(times==0){
								time.value='获取验证码'
								clearInterval(timer)
							}else{
								times--
								time.value='还有'+times+'秒'
							}
						},1000)
					}
				}
			})
		}
		const pageBack=()=> {
			uni.navigateBack({
				delta: 1
			});
		}
		function submit(){
			if(form.value.password!=form.value.re_password){
				uni.showToast({
					icon:'none',
					title:'两次密码不一致'
				})
				return
			}

			if(form.value.msg.length!=6){
				uni.showToast({
					icon:'none',
					title:'请填写验证码'
				})
				return
			}
			proxy.$request({
				url: `api/modify_password/`,
				method: 'post',
				data:form.value ,
				success(res) {
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					if(res.errno==0){
						uni.setStorageSync('userInfo',res.data)
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}

				}

			})
		}

</script>
<style lang="scss" scoped>
page{
	background-color: #fff;
}
	.container {
		background-color: #fff;
		.content-bor{
			height: 10rpx;
			box-shadow: 0px 8rpx 20rpx 0px #F6F6F6;
		}
		.content {
				padding: 30upx;
			.list {
				// background-color: #fff;
				border-radius: 20upx;

				.item {
					margin: 30upx 0;
					display: flex;
					align-items: center;
					height: 96rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 1rpx solid #D8D8D8;
					padding-left: 24rpx;
					.title {
						font-size: 28upx;
						width: 150upx;
						border-right: 1rpx solid #2D2D2D;
					}
					.uni-input{
						display: flex;
						justify-content: space-between;
						width: calc(100% - 40upx);
						background-color: #fff;
						padding: 20upx;
						border-radius: 40upx;
						.input{
							width: calc(100% - 40px);
						}
					}
					.mobile{
						width: calc(100% - 40upx);
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #fff;
						padding: 20upx;
						border-radius: 40upx;
						.time{
							text-align: center;
							min-width: 140upx;
							padding: 5upx 10upx;
							border-radius: 5upx;
							font-weight: 400;
							font-size: 28rpx;
							color: #F67800;
						}
					}
				}
			}
		}
	}
	.btn-s{
		height: 96rpx;
		background: #F63B29;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 96rpx;
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
		right: 30rpx;
	}
</style>
